<template>
  <d2-container>
    <div class="flex-1 my-2 mx-2">
      <el-form :model="formData" label-width="140px">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="抢购设置" name="first">
            <div class="mt-5 row-ac" style="width: 50%;">
              <el-form-item label="开启注册获得金币" prop="is_register">
                <el-switch v-model="formData.is_register"></el-switch>
              </el-form-item>
            </div>
            <div class="row-ac mt-2" style="width: 50%;" v-if="formData.is_register">
              <el-form-item label="注册获得金币" prop="register_species">
                <el-input-number v-model="formData.register_species" :min="0"></el-input-number>
              </el-form-item>
              <div class="font-s-2 ml-2 text-muted">枚</div>
            </div>
            <div class="mt-2 row-ac" style="width: 50%;">
              <el-form-item label="开启邀请获得金币" prop="is_invite">
                <el-switch v-model="formData.is_invite"></el-switch>
              </el-form-item>
            </div>
            <div class="mt-2 row-ac" style="width: 50%;" v-if="formData.is_invite">
              <el-form-item label="邀请获得金币" prop="invite_species">
                <el-input-number v-model="formData.invite_species" :min="0"></el-input-number>
              </el-form-item>
              <div class="font-s-2 ml-2 text-muted">枚</div>
            </div>
            <div class="mt-2 row-ac" style="width: 50%;">
              <el-form-item label="未中奖补偿" prop="unable_refund">
                <el-input-number v-model="formData.unable_refund" :min="0"></el-input-number>
              </el-form-item>
              <div class="font-s-2 ml-2 text-muted">%</div>
            </div>
            <div class="mt-2 row-ac" style="width: 50%;">
              <el-form-item label="上级补偿" prop="superior_refund">
                <el-input-number v-model="formData.superior_refund" :min="0"></el-input-number>
              </el-form-item>
              <div class="font-s-2 ml-2 text-muted">%</div>
            </div>
            <div class="mt-2 row-ac" style="width: 50%;">
              <el-form-item label="兑换手续费" prop="exchange_fee">
                <el-input-number v-model="formData.exchange_fee" :min="0"></el-input-number>
              </el-form-item>
              <div class="font-s-2 ml-2 text-muted">%</div>
            </div>
            <div class="mt-2 row-ac" style="width: 50%;">
              <el-form-item label="提现手续费" prop="withdrawal_fee">
                <el-input-number v-model="formData.withdrawal_fee" :min="0"></el-input-number>
              </el-form-item>
              <div class="font-s-2 ml-2 text-muted">%</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="钻石设置" name="diamond">
            <div class="mt-5" style="width: 70%;">
              <el-form-item label="钻石总量" prop="diamond_amount">
                <el-input-number v-model="formData.diamond_amount" :precision="2" :min="0"
                  :step="0.01"></el-input-number>
              </el-form-item>
            </div>
            <div class="mt-2" style="width: 70%;">
              <el-form-item label="钻石流通量" prop="diamond_circulation">
                <el-input-number v-model="formData.diamond_circulation" :precision="2" :min="0"
                  :step="0.01"></el-input-number>
              </el-form-item>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div class="row mt-5" style="width: 80%;">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="resetForm">重置</el-button>
      </div>
    </div>
  </d2-container>
</template>

<script>
  import {
    moneysettingPatchUrl,
    moneysettingUpdateUrl,
    moneysettingDetailUrl,
  } from '@/utils/takemoney'
  export default {
    data() {
      return {
        activeName: 'first',
        formData: {
          diamond_amount: 0,
          diamond_circulation: 0,
          is_invite: false,
          invite_species: 0,
          is_register: false,
          register_species: 0,
          unable_refund: 0,
          superior_refund: 0,
          exchange_fee: 0,
          withdrawal_fee: 0
        }
      }
    },
    mounted() {
      this.getMoneysettingDetail()
    },
    methods: {
      getMoneysettingDetail() {
        this.$get(moneysettingDetailUrl).then(res => {
          if (res.data.code == 200) {
            this.formData = {
              diamond_amount: res.data.data.diamond_amount,
              diamond_circulation: res.data.data.diamond_circulation,
              is_invite: res.data.data.is_invite,
              invite_species: res.data.data.invite_species,
              register_species: res.data.data.register_species,
              is_register: res.data.data.is_register,
              unable_refund: res.data.data.unable_refund,
              superior_refund: res.data.data.superior_refund,
              exchange_fee: res.data.data.exchange_fee,
              withdrawal_fee: res.data.data.withdrawal_fee
            }
          }
        })
      },
      handleClick() {

      },
      submitForm() {
        this.$put(moneysettingUpdateUrl, this.formData).then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.getMoneysettingDetail()
          }
        })
      },
      resetForm() {
        this.getMoneysettingDetail()
      }
    }
  }
</script>

<style>
</style>
